<template>
  <div class="platformdata-box">
    <div class="platformdata-title">
      <span class="title-span"> {{ titleName }}</span>
    </div>
    <div class="data-content" >
      <div class="platformdata-content" v-for="( item,index ) in formData" :key="index">
        <div class="contern-top">          
          <div class="biaoti-label"> {{ item.companyName }}</div>
          <div class="doytime">{{ item.doytime }}</div>
        </div>
        <div class="contern-center">
          <div class="biaoti-label" :style="{'color': '#E8E34E'}" >未完成{{''+ item.projectExtendedPercent }}%</div>
          <div class="biaoti-label" :style="{'color': '#0093DD'}" >进行中{{''+ item.projectDoPercent }}%</div>
          <div class="biaoti-label" :style="{'color': '#00DD9C'}" >已完成{{ ''+item.projectCompletedPercent }}%</div>
        </div>
        <div class="contern-bottom">
          <div class="line-color" :style="{'width': item.projectExtendedPercent +'%','background-color': '#E8E34E'}" ></div>
          <div class="line-color" :style="{'width': item.projectDoPercent+'%','background-color': '#0093DD'}" ></div>
          <div class="line-color" :style="{'width': item.projectCompletedPercent+'%','background-color': '#00DD9C'}" ></div>
          <!-- <div class="line-color" :style="{'width': progress.value,'background-color':progress.color}" v-for="( progress,index ) in item.progress" :key="index"></div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name:'PlatformData',
  props: {
    chinaMapIn: {
      type: Array,
      default: () => {
        return []
      }
    },
    mapDetail: {
      type: [Object,Array],
      default: () => {
        return {}
      }
    },
    titleName:{
      type:String,
      default: () => {
        return '项目概况'
      }
    }
  },
  watch: {
    chinaMapIn: {
      handler() {
      },
      immediate: true,
      deep: true
    },
    mapDetail: {
      handler() {
        this.formData=this.mapDetail
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      chart: null,
      detail: '',
      top:[
        require("@/assets/screen/1.png"),require("@/assets/screen/2.png"),require("@/assets/screen/3.png"),
      ],
      incomplete:'#E8E34E',
      iProgress:'#0093DD',
      completed:'#00DD9C',
      formData:[
        {
          src: require("@/assets/screen/yonghugongji.png"),
          label:'山东建筑公司',
          count:92814,
          color: '#36B2FF',
          doytime:'2022-11-02 16:24',
          progress:[
            {
              name:'未完成',
              value:'0%',
              color:'#E8E34E'
            },
            {
              name:'进行中',
              value:'20%',
              color:'#0093DD'
            },
            {
              name:'已完成',
              value:'80%',
              color:'',
              color:'#00DD9C'
            },
          ]
        },
        {
          src: require("@/assets/screen/huoyueyonghu.png"),
          label:'山东建筑公司',
          count:81029,
          color: '#8560FC',
          doytime:'2022-11-02 16:24',
          progress:[
            {
              name:'未完成',
              value:'20%',
              color:'#E8E34E'
            },
            {
              name:'进行中',
              value:'50%',
              color:'#0093DD'
            },
            {
              name:'已完成',
              value:'30%',
              color:'#00DD9C'
            },
          ]
        },
        {
          src: require("@/assets/screen/zibiao.png"),
          label:'山东建筑公司',
          count:67201,
          color: '#8560FC',
          doytime:'2022-11-02 16:24',
          progress:[
            {
              name:'未完成',
              value:'20%',
              color:'#E8E34E'
            },
            {
              name:'进行中',
              value:'50%',
              color:'#0093DD'
            },
            {
              name:'已完成',
              value:'30%',
              color:'#00DD9C'
            },
          ]
        },
        {
          src: require("@/assets/screen/huangbiao.png"),
          label:'山东建筑公司',
          count:36829,
          color: '#E8E34E',
          doytime:'2022-11-02 16:24',
          progress:[
            {
              name:'未完成',
              value:'20%',
              color:'#E8E34E'
            },
            {
              name:'进行中',
              value:'50%',
              color:'#0093DD'
            },
            {
              name:'已完成',
              value:'30%',
              color:'#00DD9C'
            },
          ]
        },
      ]
    }
  },
  mounted(){
    // console.log(this.mapDetail);
    // this.formData=this.mapDetail
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.platformdata-box {
  position: relative;
  width: 100%;
  color: #CCDCFF;
  .platformdata-title {
    position: relative;
    width: 100%;
    height: 20px;
    margin-top: 15px;
    background-image: url("../../../../assets/screen/biaoti.jpg");
    background-size: 100% 100%;
    .title-span{
      position: relative;
      font-size: 20px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #CCDCFF;
      left: 5%;
      top:-10px;
    }
  }
  .data-content{
    margin-top: 5px;
    width: 100%;
    height: calc(100% - 40px);
    background: rgba(86,103,139,0.2);
    border: 1px solid #56678B;
    border-radius: 2px;
    display: flex;
    overflow: auto;
    flex-direction: column;
    .platformdata-content{
    margin-top: 5px;
    padding: 0 5px;
    width: 100%;
    height: 104px;
    background: rgba(86,103,139,0.2);
    border-radius: 2px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    .contern-top{
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: row;
      width: 100%;
    }
    .contern-center{
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-direction: row;
      width: 100%;
    }
    .contern-bottom{
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: row;
      width: 100%;
    }
    .line-color{
      height: 8px;
    }
    .content-biaoti{
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 5px;
    }
    .biaoti-label{
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
    }
    .doytime{
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #CCDCFF;
      opacity: 0.4;
    }
    .content-count{
      font-size: 30px;
      font-family: DIN;
      font-weight: bold;
    }
  }
  }
  .platformdata-task{
    margin-top: 5px;
    width: 100%;
    height: 96px;
    background: rgba(86,103,139,0.2);
    display: flex;
    justify-content: space-between;
    .task-biaoti{
      width: 33%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      background-size: 100% 100%;
      border-radius: 2px;
    }
    .task-label{
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
    }
    .task-count{
      font-size: 30px;
      font-family: DIN;
      font-weight: bold;
    }
  }
}
</style>
